<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>K5G-C</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div class="main">
    <div class="tit-heade">
        <div class="itemOne">
            <img src="./image/left.png" >
        </div>
        <div class="itemTwo">
            <div class="item-chil">
                <img src="./image/logoutOne.png">
            </div>
            <div class="item-chil">
                <a class="logout-btn" href="/action/logout">ログアウト</a>
            </div>
            
        </div>
    </div>  
    <div class="nav2">
        <div class="nav-item">
            <div id='x1' class="item " >ホーム</div>
        </div>
        <div class="nav-item">
            <div id='x2' class="item no-act">モバイルネットワーク</div>
        </div>
        <div class="nav-item">
            <div id='x3' class="item no-act">Wi-Fi設定</div>
            <div class="hide">
                <div>
                    <div id='x31' class="item1 no-act">wifi設定</div>
                    <div class="hide">
                        <div class="item2" id="wifi1" onclick="toPage('./wifi.html')">Wi-Fi</div>
                        <div class="item2" id="wifi2" onclick="toPage('./wifiList.html')">Wi-Fi 接続情報</div>
                        <div class="item2" id="wifi_list" onclick="toPage('./wifiManage.html')">接続デバイスの管理</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x4' class="item no-act">Ethernet設定</div>
            <div class="hide">
                <div>
                    <div id='x41' class="item1 no-act">DHCP固定割当設定</div>
                    <div class="">
                        <div class="item2" id="DHCP">DHCP固定割当設定</div>
                        <div class="item2" id="MAC">MAC IP Bindingリスト</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x5' class="item no-act">LAN設定</div>
            <div class="hide">
                <div>
                    <div id='x51' class="item1 no-act" onclick="toPage('./port.html')">ポートフォワーディング</div>
                    <div class="hide">
                        <div class="item2 " id="port" onclick="toPage('./port.html')">ポートフォワーディング</div>
                        <div class="item2" id="port_list" onclick="toPage('./portList.html')">ポートフォワーディングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x52' class="item1 no-act" onclick="toPage('./ipFiltering.html')">IPパケットフィルタリング</div>
                    <div class="hide">
                        <div class="item2 " id="IP" onclick="toPage('./ipFiltering.html')">IPパケットフィルタリング</div>
                        <div class="item2 " id="IP_list" onclick="toPage('./ipList.html')">IPパケットフィルタリングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x54' class="item1 no-act" onclick="toPage('./ipv6Filtering.html')">IPv6パケットフィルタリング</div>
                    <div class="hide">
                        <div class="item2" id="IPV6">IPv6パケットフィルタリング</div>
                        <div class="item2" id="IPV6_list" onclick="toPage('./ipv6List.html')">IPv6パケットフィルタリングリスト</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-itm">
            <div id='x6' class="item no-act" >端末設定</div>
            <div class="">
                <div>
                    <div class="">
                        <div class="item1 choose">パスワード変更</div>
                        <div class="item1">データ通信量設定</div>
                        <div class="item1">ソフトウェア更新</div>
                        <div class="item1">リセット</div>
                        <div class="item1">デバイス情報</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="title">パスワード変更</div>
        <div style="margin-left: 100px;margin-top: 10px;">
            <p>ルーター設定（Web）画面へのログインパスワードを設定できます。</p>
            <p>設定可能なパスワードは以下の条件を満たす必要があります。</p>
            <p>・8～32文字の半角英数字および記号（[!][#][*][@][&][.]）</p>
            <p>・英大文字、英小文字、数字、記号の4種類の文字をそれぞれ1文字以上含める</p>
        </div>
        <div class="password">
            <form action="" class="default-form">
                <table class="input-table">
                    <tbody>
                    <tr>
                        <th><label class="password" style="text-align:center" for="oldPassword">現在のパスワード</label></th>
                        <td>
                            <input type="password" class="mac-input" name="oldPassword" id="oldPassword"
                                   placeholder="" />
                        </td>
                    </tr>
                    <tr>
                        <th><label class="password" style="text-align:center" for="password">新しいパスワード</label></th>
                        <td>
                            <input type="password" class="mac-input" name="password" id="password" />
                        </td>
                    </tr>
                    <tr>
                        <th><label for="password2">パスワードの確認</label></th>
                        <td>
                            <input type="password" class="mac-input" name="password2" id="password2" />
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="horizontal-box">
                    <div class="submit-btn" onclick="cancelSetting()">クリア</div>
                    <div class="submit-btn" onclick="passwordSetting()">適用</div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="./js/utils.js"></script>
<script>
    window.onload = function () {
        testAction()
    }
    function passwordSetting() {
        var reg =/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]{8,32}$/;
        if (!document.getElementById("oldPassword").value) {
            Message.info('現在のパスワードを入力してください')
            return false
        }
        if (!document.getElementById("password").value) {
            Message.info('新しいパスワードを入力してください')
            return false
        }
        if (!reg.test(document.getElementById("password").value)) {
            Message.info('新しいパスワードは無効です')
            return false
        }
        if (document.getElementById("oldPassword").value == document.getElementById("password").value) {
            Message.info('現在使用中のパスワードと同一のパスワードは設定できません')
            return false
        }
        if (!document.getElementById("password2").value) {
            Message.info('パスワードの確認を入力してください')
            return false
        }
        if (document.getElementById("password").value != document.getElementById("password2").value) {
            Message.info('新しいパスワードが一致しません')
            return false
        }
        var params = {
            "currentPsd": document.getElementById("oldPassword").value,
            "password": document.getElementById("password").value,
            "password2": document.getElementById("password2").value,
        }
        Ajax.post(baseUrl + '/action/passwordSetting', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                Message.info("パスワードを変更しました")
                document.getElementById("oldPassword").value = ''
                document.getElementById("password").value = ''
                document.getElementById("password2").value = ''
                document.getElementsByClassName("logout-btn")[0].click() // logout
            } else {
                if(response.message == 0){
                    Message.info('現在のパスワードが異なります。正しいパスワードを入力してください')
                    document.getElementById("oldPassword").value = ''
                }
                if(response.message == 1){
                    Message.info('パスワードが一致しません。正しいパスワードを入力してください')
                    document.getElementById("password").value = ''
                    document.getElementById("password2").value = ''
                }
                if(response.message == 2){
                    Message.info('処理に失敗しました')
                }


            }
        })
    }
    function cancelSetting() {
        document.getElementById("oldPassword").value = ''
        document.getElementById("password").value = ''
        document.getElementById("password2").value = ''
    }
</script>
</body>
</html>
